<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/home' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/note/list' }">我的笔记</el-breadcrumb-item>
      <el-breadcrumb-item>添加笔记</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <link rel="stylesheet" href="/static/editormd/css/editormd.css"/>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" id="mdEditorForm">
      <!-- 文章发布表单 -->
      <el-form-item label="标题" prop="noteTitle">
        <el-input name="noteTitle" v-model="ruleForm.noteTitle"></el-input>
      </el-form-item>
      <!-- Editor.md 富文本编辑器 -->
      <div id="note-content">
        <textarea name="noteContent" id="noteContent" style="display:none;"></textarea>
      </div>
    </el-form>

  </div>
</template>

<script>
import scriptjs from 'scriptjs'
export default {
  data() {
    return {
      ruleForm: {
        noteTitle: '',
        noteContent: '',
      },
      rules: {
        noteTitle: [
          { required: true, message: '请输入笔记标题(1~100个字)', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  name: "Edtior",
  mounted(){
    var _this = this;
    //使用了异步操作(async/await)和Promise。
    // 在编辑器加载之前，需要先加载jQuery、Editor.md和pasteImg.js这三个文件。
    // 由于这些文件需要从网络下载，因此加载它们是一个异步操作。
    // async/await关键字标记了这些异步操作，在等待每个文件下载完成后才继续执行后面的代码。
    // _this.loadJs(url)是一个自定义函数，它返回一个Promise对象。
    // 当函数成功执行时，该Promise对象将被解析(resolve)，否则将被拒绝(reject)。
    // await表示要等到这个Promise对象被解析后才会继续执行下一行代码。
    // 这里的目的是确保在Editor.md库加载完成之前，所有依赖项都已经加载完毕。
    // 最后，设置_this.jsLoadOver = true;来表示所有JS文件加载完毕。
    (async () =>{
      await _this.loadJs("/static/editormd/js/jquery.min.js");
      await _this.loadJs("/static/editormd/js/editormd.js");
      await _this.loadJs("/static/editormd/js/pasteImg.js");
      _this.jsLoadOver = true;
      editormd("note-content", {
        width: "100%",   // 宽
        height: "500px",    // 高
        path : "/static/editormd/lib/",    // 加载编辑器lib路径
        syncScrolling: "single",    // 设置同步显示，三个选项[ true| false| "single"，默认为true
        placeholder: '请开始编写你的MarkDown笔记……',
        saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
        emoji: true,    // 开启表情功能，默认为false
        // theme: "dark",//工具栏主题
        // previewTheme: "dark",//预览主题
        // editorTheme: "pastel-on-dark",//编辑主题
        tex : true, // 开启科学公式TeX语言支持，默认关闭
        flowChart : true,   // 开启流程图支持，默认关闭
        sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
        //图片上传
        imageUpload : true, // 开启图片上传
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],    // 图片上传的类型
        imageUploadURL : "/api/note/file/upload", // 图片上传路径
        onload : function() {
          initPasteDragImg(this); //支持复制图片直接粘贴
        },
        /*指定需要显示的功能按钮*/
        toolbarIcons : function() {
          return ["undo","redo","|",
            "bold","del","italic","quote","ucwords","uppercase","lowercase","|",
            "h1","h2","h3","h4","h5","h6","|",
            "list-ul","list-ol","hr","|",
            "link","reference-link","image","code","preformatted-text",
            "code-block","table","datetime","emoji","html-entities","pagebreak","|",
            "goto-line","watch","preview","fullscreen","clear","search","|",
            "help","releaseIcon","index"]
        },
        /*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
        toolbarIconTexts : {
          releaseIcon : "<span bgcolor=\"gray\">发布</span>",
          index : "<span bgcolor=\"red\">返回首页</span>"
        },
        /*给自定义按钮指定回调函数*/
        toolbarHandlers:{
          releaseIcon : function(cm, icon, cursor, selection) {
            // 添加表单验证逻辑
            _this.$refs.ruleForm.validate(valid => {
              if (valid) {
                // 表单验证通过，可以进行表单提交操作
                _this.axios({
                  method: 'post',
                  url: '/api/note/addNote',
                  data: $("#mdEditorForm").serialize()
                }).then(function (response) {
                  let status = response.data.code;
                  let message = response.data.message;
                  if(status == 200){
                    _this.$message({
                      message: '添加成功！',
                      type: 'success'
                    });
                    _this.$router.push('/note/list');
                  }else{
                    let title = '操作失败';
                    this.$alert(message, title, {
                      confirmButtonText: '确定',
                      callback: action => {
                      }
                    });
                  }
                  console.log(response)
                })
              } else {
                _this.$alert('添加笔记失败,请您检查输入的内容是否为空!', '', {
                  confirmButtonText: '确定',
                  callback: action => {
                  }
                });
              }
            });
          },
          index : function(){
            window.location.href = '/home';
          }
        },
      })
    })();
  },
  methods: {
    loadJs: function (url) {
      return new Promise((resolve) => {
        scriptjs(url, () =>{
          resolve();
        })
      })
    },
    created() {
      this.axios({
        url: '/api/note/toEditor',
        method: 'GET'
      })
    }
  }
}
</script>

